<template>
  <div>
    <nuxt-link to="/code/DbEntityDefined"> 返回 </nuxt-link>
    <DataGrid :columns="columns" ref="grid" :action="api">
      <template slot="buttons">
        <Button type="primary" @click="add()">新增</Button>
        <Button type="primary" @click="ui()">界面</Button>
      </template>
        <ops slot="action" :num="1" :data="buttons" slot-scope="{row,column,index}" :row="row">
        </ops>
    </DataGrid>
    <Modal v-model="box.value" v-bind="box">
      <component
        :is="box.page"
        :api="api"
        :row="row"
        @on-close="cancel"
        @on-ok="ok"
      />
    </Modal>
  </div>
</template>

<script>
import Api from "@/api/base";
export default {
  data() {
    return {
      box:{
        title:"hide",
        value:false,
        detail:null,
        fullscreen:false,
        footerHide:true,
        width:1200,
        show:(title,page,width)=>{
          this.box.value=true;
          this.box.title=title;
          this.box.page=page;
          if(width===0){
            this.box.fullscreen=true;
          }else{
            if(width){
              this.box.width=width;
            }
            this.box.fullscreen=false;
          }
        }
      },
      action: "/api/DepartMent/paged",
      api: null,
      curId: null,
      columns: [],
      title: "",
      buttons: [
        { text: "View", icon: "md-eye",name:"View" ,click:this.view,disabled:true},
        { text: "Add", icon: "md-add",name:"Add" },
        { text: "Edit", icon: "md-create",name:"Edit" },
        { text: "Remove", icon: "ios-trash",name:"Remove" },
      ],
    };
  },
  components: {},
  async fetch({ store, params }) {
    // console.log(this.columns);
  },
  async asyncData({ params }) {
    let api = new Api("/api/" + params.id);
    let { result } = await api.info(); // 加载数据列
    // console.table(result.columns);
    let columns = result.columns.map((u) => {
      var col = {
        key: u.propertyName.charAt(0).toLowerCase() + u.propertyName.slice(1),
        title: u.columnDescription,
        hide: u.baseType > 1||u.dataType.indexOf('text')>-1||u.dataType.indexOf("json")>-1,
        // ellipsis:true,
        tooltip:true,
      };
      if (u.code) {
        col.code = u.code;
      }
      return col;
    });
    api.base = result;
    columns.push({
      key:"action",
      title:"操作",
      align:"center",
      width:150,
      slot:"action"
    })
    return { api, columns };
  },
  created() {
    // console.log(this.columns);
  },
  mounted() {
    //this.api = new Api("/api/DepartMent");
    //this.api.get({ id: "83140bd9-6469-592f-824c-48a4b03548b4" });
  },
  methods: {
    add(row) {
      // this.modal = true;
      // this.title = "新增" + this.api.base.tableDescription;
      // this.detail = () => import("./add");
      this.row = row;
      this.box.show("新增" + this.api.base.tableDescription,() => import("./add"))
    },
    view(row,c){
      console.warn("row.view",row,c)
      alert(row.id);
    },
    ui(){
      var page={
        // path:"/bus/layout",
        title:"布局",
        name:"bus-layout",
         params:this.api
        //,params:this.api.base
      }
      console.warn("page",page)
      this.$router.push(page);

    },
    row(m, row) {},
    cancel() {},
    ok() {},
  },
};
</script>

<style style="less">
</style>
